<template>
  <view class="refund">
    <view class="navs">
      <navigator
        url="/packageA/order/index"
        open-type="navigate"
        hover-class="none"
      >
        <u-icon name="arrow-leftward"></u-icon>
      </navigator>
      <view class="sear"> 账单详情</view>
    </view>
    <view class="tk-xq">
      <view class="xq">
        <view class="tui"> 退 </view>
        <view class="num">+230.00</view>
        <view class="suc">退款成功</view>
      </view>
      <view class="dd-num">
        <view class="num">
          <view class="mon">申请退款金额</view>
          <view>230.00</view>
        </view>
        <view class="num">
          <view class="mon"> 退款至</view>
          <view>微信</view>
        </view>
        <view class="num">
          <view class="mon"> 退款受理时间</view>
          <view>2024-4-01 08：11：01</view>
        </view>
        <view class="num">
          <view class="mon"> 退款单号</view>
          <view>123456789012</view>
        </view>
        <view class="num">
          <view class="mon"> 商家单号</view>
          <view> 12344567988790908909asf</view>
        </view>
      </view>
    </view>
    <view class="tk-jd">
      <view class="tk-tl">退款进度</view>
      <view class="tk-step">
        <u-steps current="00" direction="column" activeColor="#FFCA6F">
          <u-steps-item title="退款处理完成，微信已入账">
            <view class="slot-icon" slot="icon">
              <u-icon name="checkbox-mark"></u-icon>
            </view>
            <view slot="desc" class="desc">
              <view class="time">2024-4-01 08：11：01</view>
              <view>
                微信已在2024-4-01
                08：11：01前将230元入账至您的微信账户。如有疑问请拨打微信客服95017咨询。
              </view>
            </view>
          </u-steps-item>
          <u-steps-item title="退款处理完成，微信已入账">
            <view class="slot-icon1" slot="icon">
              <u-icon name="checkbox-mark"></u-icon>
            </view>
            <view slot="desc" class="desc1">
              <view class="time">2024-4-01 08：11：01</view>
              <view>您的退款已被微信成功受理。</view>
            </view>
          </u-steps-item>
          <u-steps-item title="云上农夫审核通过">
            <view class="slot-icon1" slot="icon">
              <u-icon name="checkbox-mark"></u-icon>
            </view>
            <view slot="desc" class="desc1">
              <view class="time">2024-4-01 08：11：01</view>
              <view>云上农夫已受理您的退款申请 </view>
            </view>
          </u-steps-item>
        </u-steps>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "refund",
  components: {},
  data: () => ({}),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {},
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.refund {
  font-family: "Poppins";
  background-color: #f9f9f9;
  padding-bottom: 40rpx;
  position: absolute;
  width: 100%;
  height: 100%;
  .navs {
    padding-top: 140rpx !important;
    display: flex;
    align-items: center;
    margin-left: 5%;
    .sear {
      margin-left: 33%;
    }
  }
  .tk-xq {
    width: 90%;
    border-radius: 10rpx;
    margin: 20rpx auto;
    background: #fff;

    .xq {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .tui {
        background: #fa7070;
        width: 94rpx;
        height: 94rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 50rpx;
        margin-top: 20rpx;
      }
      .num {
        font-size: 50rpx;
      }
      .suc {
        color: #8d8683;
        font-size: 26rpx;
      }
    }

    .dd-num {
      padding: 40rpx 20rpx;
      .num {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        margin: 10rpx;
        color: #000;
        .mon {
          color: #8d8683;
        }
      }
    }
  }
  .tk-jd {
    width: 85%;
    border-radius: 10rpx;
    margin: 20rpx auto;
    background: #fff;
    padding: 25rpx;
    .tk-step {
      margin: 20rpx 0;
      font-size: 28rpx;
      .slot-icon,
      .slot-icon1 {
        width: 21px;
        height: 21px;
        background-color: $u-warning;
        border-radius: 100px;
        font-size: 12px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slot-icon1 {
        background-color: #d8d8d8;
      }
    }
    .desc1 {
      color: #d8d8d8;
    }

    ::v-deep .u-text__value--content {
      color: #d8d8d8;
    }
  }
}
</style>